import { Component } from 'react'
import { View, Form, Input, Button, Text, Map } from '@tarojs/components'
import { observer, inject } from 'mobx-react'
import Taro from '@tarojs/taro'
import QQMapWX from '../../../utils/qqmap-wx-jssdk'
import mapConfig from '../../../config/map.config'

import './index.less'

@inject('store')
@observer
class AddDestination extends Component {
  state = {
    name: '',
    description: '',
    location: ''
  }

  handleInput = (field, e) => {
    this.setState({
      [field]: e.target.value
    })
  }

  handleSubmit = () => {
    const { destinationsStore } = this.props.store
    const { name, description, location } = this.state

    if (!name || !location) {
      Taro.showToast({
        title: '请填写目的地名称和位置',
        icon: 'none'
      })
      return
    }

    destinationsStore.addDestination({
      name,
      description,
      location,
      visited: false,
      createTime: new Date().toISOString()
    })

    Taro.showToast({
      title: '添加成功',
      icon: 'success'
    })

    Taro.navigateBack()
  }

  render() {
    const { name, description, location } = this.state

    return (
      <View className='add-destination'>
        <Form onSubmit={this.handleSubmit}>
          <View className='form-item'>
            <Text className='label'>目的地名称</Text>
            <Input
              className='input'
              value={name}
              onInput={e => this.handleInput('name', e)}
              placeholder='请输入目的地名称'
            />
          </View>

          <View className='form-item'>
            <Text className='label'>位置</Text>
            <Input
              className='input'
              value={location}
              onInput={e => this.handleInput('location', e)}
              placeholder='请输入位置'
            />
          </View>

          <View className='form-item'>
            <Text className='label'>描述</Text>
            <Input
              className='input'
              value={description}
              onInput={e => this.handleInput('description', e)}
              placeholder='请输入描述（选填）'
            />
          </View>

          <Button className='submit-btn' formType='submit'>
            添加目的地
          </Button>
        </Form>
      </View>
    )
  }
}

export default AddDestination